<template>
	<view class="jobDetailPage">
		<view class="bgf radius30  mL15 mR15 pT10 pB15 pL12 pR12">
			<view class="flex alg-center">
				<image class="imgW90 radius30" :src="resources.defaultHeader" mode=""></image>
				<view class="mL10" style="width: calc(100% - 110rpx);">
					<view class="flex jst-between alg-center">
						<text class="font16 bold">{{info?.comName}}</text>
						<view @click="phoneLink(info.id)">
							<image class="imgW54" :src="resources.job.cirMessage" mode=""></image>
						</view>
					</view>
					<view class="u-6 font13 mT5">联系人：{{info?.comContacts}}</view>
				</view>
			</view>
			<view class="pT10">
				<view class="flex">
					<u-image :width="32" :height="32" :src="resources.posIcon" mode=""></u-image>
					<text class="mL5 font15 u-3">

						{{info?.provinceName}}-{{info?.cityName}}-{{info?.areaName}}
					</text>
				</view>
				<view class="flex  jst-between mT5">
					<view class="u-6 font13">
						{{info?.comBelongAddress}}
					</view>
					<view class="u-6 font13 mL10">
						{{info?.distance}}
					</view>
				</view>

			</view>

		</view>
		<view class="mL15 mR15 pT15 pB15">
			<view class="flex  font17">
				在招工作 {{total}}
			</view>

		</view>
		<mescroll-uni class="lisBox" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:down="downOption" :up="upOption" :bottombar="false" :top="topH">
			<view class="bgf radius30  pB15 mL15 mR15 mB15" v-for="(item,i) in list" :key="'ii'+i"
				@click="xf.onlineUtils.route(`/pages/economicPage/subpackge/recommendRecord/index?id=${item.xfOddjobInfoId}`)">
				<view class="flex">
					<text class="leftBadge">{{item.groundingStateText}}</text>
				</view>
				<view class="pL15 pR15">
					<view class="flex  alg-center jst-between">
						<view class="flex alg-center w75"
							@click.stop="xf.onlineUtils.route(`/pages/common/workDetail/index?id=${item.xfOddjobInfoId}`)">
							<text class="jobTitle" :class="xf.getItemClass(item)">{{item.oddJobName}}</text>
							<u-tag v-if="item.izUrgent==1" text="急聘" bg-color="#fff" class="jpTag" :color="'#FF0000'"
								:border-color="'#FF0000'" />
							<u-tag v-if="item.recruitmentCarefree&&item.recruitmentCarefree.indexOf('10')>=0"
								text="用工无忧" bg-color="#EAF4FE" class="zgTag" :color="'#3291F8'"
								:border-color="'#EAF4FE'" />
						</view>
						<view class="jobMoney txt-ellipsis  font20 u-red">{{item.salary}}<text
								class="jobUint font13">元</text></view>
					</view>
					<view class="flex alg-center jst-between">
						<view class="flex alg-center flex-wrap w60">

							<view class="jobTime">{{item.jobBeginDatetime}}-{{item.jobEndDatetime}}</view>
							<view class="jobTime">{{item.salaryPaymentText}}</view>
							<view class="jobTime">招{{item.oddJobUseNum}}人</view>
						</view>
						<view class="font13 u-red syM">预计收益:{{item.expectIncome}}元</view>
					</view>
					<view class="flex jobInfo mT10 pT15 pB15 pL10 pR10">
						<view class="w25">
							<view class="t-center font21 bold">{{item.suggestNum||0}}</view>
							<view class="t-center font13 u-6 mT5">已推荐</view>
						</view>
						<view class="w25">
							<view class="t-center font21 bold">{{item.enroll||0}}</view>
							<view class="t-center font13 u-6 mT5">已报名</view>
						</view>
						<view class="w25">
							<view class="t-center font21 bold">{{item.hire||0}}</view>
							<view class="t-center font13 u-6 mT5">已录用</view>
						</view>
						<view class="w25">
							<view class="t-center font21 bold">{{item.complete||0}}</view>
							<view class="t-center font13 u-6 mT5">已完成</view>
						</view>
					</view>
					<view class="flex alg-center jst-between mT10">
						<view class="flex w70">
							<image class="imgW32" :src="resources.posIcon" mode=""></image>
							<text class="posTxt mL5 txt-ellipsis"
								style="width: calc(100% - 42rpx);">{{item.hopeWorkAddress}}</text>
						</view>
						<view class="font13 u-6">{{item.distance}}</view>
					</view>
					<view class="flex alg-center mT10 jst-between">
						
						<view class="flex alg-center w70" :class="item.groundingState==1?'w100':'w70'">
							<view class="font13 u-org w100" v-if="item.groundingState==1">
								温馨提示：请尽快交付押金，发布职位
							</view>
							<block v-if="item.groundingState==0">
								<view class="flex alg-center" @click.stop="upShelevesOpt(item)">
									<image class="imgW32" :src="resources.xjIcon" mode=""></image>
									<text class="font13 u-6  mL5">下架</text>
								</view>
							</block>
							<block v-if="item.groundingState==2||item.groundingState==3">
								<view class="flex alg-center w33 jst-center u-border-right"
									@click.stop="xf.onlineUtils.route(`pages/common/publishPage/index?id=${item.xfOddjobInfoId}&companyId=${info.id}`)">
									<image class="imgW32" :src="resources.ecoPubEdit" mode=""></image>
									<text class="font13 u-6  mL5">编辑</text>
								</view>
								<view @click.stop="upShelevesOpt(item)"
									class="flex alg-center w33 jst-center u-border-right" v-if="item.groundingState==2">
									<image class="imgW32" :src="resources.sjIcon" mode=""></image>
									<text class="font13 u-6  mL5">上架</text>
								</view>

								<view class="flex alg-center w33 jst-center u-border-right"
									v-if="item.groundingState==3">
									<image class="imgW32" :src="resources.freshIcon" mode=""></image>
									<text class="font13 u-6  mL5">刷新</text>
								</view>
								<view class="flex alg-center w33 jst-center" @click.stop="deleteJobOpt(item)">
									<image class="imgW32" :src="resources.deleteIcon" mode=""></image>
									<text class="font13 u-6  mL5">删除</text>
								</view>
							</block>
						</view>
						<!-- 只有上架状态可以推荐 -->
						<view v-if="item.groundingState==0" class="btnTj"
							@click.stop="xf.onlineUtils.route(`/pages/common/devideJob/index?id=${item.xfOddjobInfoId}`)">
							给Ta推荐</view>

					</view>
				</view>

			</view>
			<view class="w100" style="height: 100rpx;">

			</view>
		</mescroll-uni>
		<view class="bottomFixed pT10 pB10">
			<view class="btnGreen pointer"
				@click="xf.onlineUtils.route(`/pages/common/publishPage/index?companyId=${info.id}`)">
				添加工作
			</view>
		</view>
		<xfTipModal ref="tipModal"></xfTipModal>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		queryComUpPart,
		queryCompanyJob
	} from '@/api/economicInterface/user.js'
	import workerJob from "@/components/company/jobCard/index.vue"
	import {
		getLocal
	} from "@/libs/map.js"
	import {
		myFbMore,
		upShelves,
		deleteJob
	} from '@/api/companyInterface/user.js'
	import { getPhone } from "@/api/userInterface/job"
	export default {
		mixins: [MescrollMixin],
		components: {
			workerJob
		},
		watch: {
			info() {
				if (this.flagSetH == true) {
					this.$nextTick(() => {
						this.getElementScollTop()
						this.flagSetH = false;
						console.log(this.flagSetH)
					})
				}
			},
		},
		data() {
			return {
				loading: false,
				id: null,
				showModal: false,
				info: null,
				tx: null,
				latitude: null,
				longitude: null,
				total: 0,
				list: [],
				topH: 0,
				flagSetH: true,
				downOption: {
					use: true,
					auto: false
				},
				upOption: {
					page: {
						num: 0,
						size: 10,
						time: null
					},
					empty: {
						use: true,
						icon: '/static/image/nodata.png',
						tip: "暂无数据",
						fixed: true
					},
					textNoMore: "到底啦~",
				},
			};
		},
		onShow() {
			this.mescroll && this.mescroll.triggerDownScroll()
		},
		onLoad(e) {
			this.id = e.id;
			this.getDetail(this.id)
		},
		methods: {
			//删除
			deleteJobOpt(v) {
				let that = this;
				this.$refs.tipModal.open({
					btnText: "删除",
					content: "确认删除该职位吗?",
					showCanel: true,
					success: function() {
						deleteJob({
							id: v.id
						}).then(res => {
							that.xf.onlineUtils.toast("删除成功!")
							that.list = [];
							that.mescroll.resetUpScroll();

						})
					}
				})
			},
			//上架，下架
			upShelevesOpt(v) {
				let that = this;
				this.$refs.tipModal.open({
					btnText: v.groundingState == 0 ? "下架" : "上架",
					content: v.groundingState == 0 ? "确认下架该职位吗?" : "确认上架该职位吗?",
					showCancel: true,
					success: function() {
						upShelves({
							"xfOddjobInfoId": v.xfOddjobInfoId,
							"groundingState": v.groundingState == 0 ? 2 : 0,
							"groundingStateText": v.groundingState == 0 ? '已下架' : '招聘中'
						}).then(res => {
							if (v.groundingState == 0) {
								that.xf.onlineUtils.toast("下架成功!")
								v.groundingStateText = "已下架";
								v.groundingState = 2;
							} else {
								that.xf.onlineUtils.toast("上架成功!")
								v.groundingStateText = "招聘中";
								v.groundingState = 0;
							}
						})
					}
				})
			},
			callNumber() {
				let id = this.info.xfOddUserId;
				this.xf.callPhone({
					acquirerId: id,
					details: 10
				})
			},
			phoneLink(id) {
				let that = this;
				getPhone({
					acquirerId: id
				}).then(res => {
					const {result} = res
					if (result.code && result.code == 201){
						let htmlStr = `<p class="mT10">拨打电话需支付<span class="u-red">2元</span></p>`
						this.$refs.tipModal.open({
							slotHtml: htmlStr,
							btnText: "拨打",
							showCancel: true,
							success: function() {
								that.xf.jumpPayPage(`acquirerId=${id}`)
							}
						})
					} else {
						this.$refs.tipModal.open({
							content: "确认拨打电话吗？",
							btnText: "拨打",
							showCancel: true,
							success: function() {
								that.xf.callPhone({
									acquirerId: id
								})
							}
						})
					}	
				})
			},
			//获取滚动框距离顶部距离
			getElementScollTop() {
				const query = uni.createSelectorQuery()
				query.select('.lisBox').boundingClientRect((data) => {
					this.topH = Math.round(data.top) + 'px'
					console.log(this.topH)
				}).exec()
			},
			//派单
			grabOpt(v) {
				let that = this;
				this.$refs.tipModal.open({
					btnText: "派单给Ta",
					content: "确认派单给Ta吗？",
					showCancel: true,
					success: function() {
						workJober([{
							"xfOddGeneralId": v.xfOddUserId,
							"oddjobInfoId": that.info?.id,
							"isGrab": "1"
						}]).then(res => {
							uni.showToast({
								icon: 'none',
								title: "派单成功!",
								duration: 2000
							})
							setTimeout(() => {
								that.getPosLis()
							}, 2000)
						})
					}
				})
			},
			async upCallback(page) {

				if (page.num == 1) this.list = [];
				let pageNo = page.num;

				const {
					lat,
					lon
				} = await this.xf.getLatOrLon();
				queryCompanyJob({
					latitude: lat,
					longitude: lon,
					comId: this.id,
					pageSize: 10,
					pageNo: pageNo
				}).then(res => {
					let list = res.result.records;
					this.list = this.list.concat(list);
					this.total = res.result.total;
					this.mescroll.endSuccess(res.result.records.length);
				}).catch(err => {
					this.mescroll.endByPage(0, 0);
					this.mescroll.endSuccess(1);
					this.mescroll.endErr();
				})
			},
			async getDetail(id) {
				const {
					lat,
					lon
				} = await this.xf.getLatOrLon();
				this.info = null;
				queryComUpPart({
					comId: id,
					latitude: lat,
					longitude: lon
				}).then(res => {

					this.info = res.result
				})
			}

		}
	};
</script>
<style lang="scss">
	page {
		min-height: 100%;
		background: linear-gradient(0deg, #F8FAFF, #EBFCFF);
	}
</style>
<style scoped lang="scss">
	.btnGreen {
		line-height: 100rpx;
		height: 100rpx;
		background: #00A0C6;
		font-size: 32rpx;
		text-align: center;
		color: #fff;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		margin: 0 30rpx 0 30rpx;
	}

	.btnTj {
		width: 180rpx;
		height: 66rpx;
		line-height: 66rpx;
		text-align: center;
		background: linear-gradient(to right, #4DBBF0, #00A0C6);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 0.99;
		font-size: 28rpx;
		color: #fff;
	}

	.syM {
		margin-top: 16rpx;
		line-height: 44rpx;
	}

	.jobTime {
		color: #8D8D8D;
		font-size: 26rpx;
		margin-right: 6rpx;
		height: 44rpx;
		line-height: 44rpx;
		padding: 0 10rpx;
		background: #F8F8F8;
		border-radius: 6rpx;
		margin-top: 16rpx;
	}

	.jobInfo {
		background: #F8F8F8;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.leftBadge {
		color: #00A0C6;
		font-size: 24rpx;
		background-color: #EBFCFF;
		text-align: center;
		width: 120rpx;
		line-height: 40rpx;
		border-radius: 30rpx 0 30rpx 0;
	}
</style>